       /* 1.定义动画 */
        @keyframes logomove {

            /* 开始状态 */
            0% {
                transform: translateX(-100px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(0px);
            }
        }

        @keyframes ulmove {

            /* 开始状态 */
            0% {
                transform: translateY(50px);
            }

            /* 结束状态 */
            100% {
                transform: translateY(0px);
            }
        }

        @keyframes rot {

            /* 开始状态 */
            0% {
                transform:rotate(0deg);
            }

            /* 结束状态 */
            100% {
                transform:rotate(720deg);
            }
        }

        .logo {
            /* 2.调用动画 名称+时间*/
            animation-name: logomove;
            animation-duration: 2s;
        }

        .header ul{
            animation-name: ulmove;
            animation-duration: 2s;
        }

        .smpic1:hover{
            animation-name: rot;
            animation-duration: 1s;
        }